<%@page import="java.util.List"%>
<%@page import="vn.ac.c0910g.assignment.Entity.Category"%>
<%@page import="vn.ac.c0910g.assignment.DAO.CategoryDAO"%>
<html lang="en"><head>
	<meta charset="utf-8">
	<title>Dashboard I Admin Panel</title>
        <link rel="stylesheet" href="../resources/css/layout2.css" type="text/css" media="screen">
	<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" />
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
        <script src="../resources/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script src="../resources/scripts/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
	<script src="../resources/scripts/hideshow.js" type="text/javascript"></script>
	<script src="../resources/scripts/jquery.tablesorter.min.js" type="text/javascript"></script>
	<script src="../resources/scripts/jquery.equalHeight.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function()
    	{
      	  $(".tablesorter").tablesorter();
   	 }
	);
	$(document).ready(function() {

	//When page loads...
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content

	//On Click Event
	$("ul.tabs li").click(function() {

		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content

		var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active ID content
		return false;
	});

});
    </script>
    <script type="text/javascript">
    $(function(){
        $('.column').equalHeight();
    });
</script>
</head>
<%
    CategoryDAO catDAO = new CategoryDAO();
    List<Category> list = catDAO.getAllCategory();
%>
<body>
	<div id="header" style="background-color: black;height: 50px;margin-top: -15px;">
	<h1 class="site_title" style="background: black;font-weight: 400;color: white;"><a href="#" style="color: white;">Website Admin</a></h1>
	<h2 class="section_title" style="margin-left: 600px;margin-top: -30px;color: white;">Dashboard</h2>
        <div class="btn_view_site" style="margin-left: 1150px;margin-top: -50px;"><a href="../Home/index.jsp"> View Site </a></div>
	</div> <!-- end of header bar -->

	<div id="secondary_bar">
                <div class="user">
                    <%if(session.getAttribute("admin") != null){%>
			<p><%=session.getAttribute("admin")%></p>
			<a class="logout_user" title="Logout" id="btnOut">Logout</a>
                    <%}else{response.sendRedirect("login.jsp");%>
                    <%}%>
                        </div>
		<div class="breadcrumbs_container">
			<div class="breadcrumbs"><a href="admin.jsp">Admin</a> <div class="breadcrumb_divider"></div> <a class="current">Category</a></div>
		</div>
	</div><!-- end of secondary bar -->

	<div id="sidebar" class="column" style="height:650px; ">
		<form class="quick_search">
			<input type="text" value="Quick Search" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">
		</form>
		<hr>
		<h3>Content</h3>
		<ul class="toggle">
			<li class="icn_new_article"><a href="contactus.jsp">Contact Us</a></li>
			<li class="icn_edit_article"><a href="feedback.jsp">Feedback</a></li>
			<li class="icn_categories"><a href="faqs.jsp">FAQs</a></li>
			<li class="icn_tags"><a href="project.jsp">Project</a></li>
		</ul>
		<h3>Members</h3>
		<ul class="toggle">
			<li class="icn_add_user"><a href="admin.jsp">Administrators</a></li>
			<li class="icn_view_users"><a href="users.jsp">Users</a></li>
		</ul>
		<h3>Product</h3>
		<ul class="toggle">
			<li class="icn_folder"><a href="service.jsp">Services</a></li>
			<li class="icn_photo"><a href="category.jsp"><b>Category</b></a></li>
			<li class="icn_photo"><a href="order.jsp">Orders</a></li>
			<li class="icn_photo"><a href="orderdetail.jsp">Order Details</a></li>
                        <li class="icn_photo"><a href="payment.jsp">Payment</a></li>
                        <li class="icn_photo"><a href="paymentdetail.jsp">Payment Details</a></li>
		</ul>
		<h3>Administrators</h3>
		<ul class="toggle">
			<li class="icn_settings"><a href="#">Options</a></li>
			<li class="icn_security"><a href="#">Security</a></li>
			<li class="icn_jump_back"><a href="#">Logout</a></li>
		</ul>
	</div><!-- end of sidebar -->

	<div id="main" class="column" style="height:650px; ">

		<h4 class="alert_info">Category Management</h4>

		<div class="module width_3_quarter">
		<div style=""><h3 class="tabs_involved">Category</h3>
                     <button id="btnAdd" style=" float: right; margin-top: -30px; margin-right:90px;">Add</button>
		</div>
		<div class="tab_container">
			<div id="tab1" class="tab_content" style="display: block; ">
			<table class="tablesorter" cellspacing="0">
			<thead>
				<tr>
                                <th class="header" style="display:none;"></th>
    				<th class="header headerSortUp" style="font-size:12px;">Category ID</th>
    				<th class="header" style="font-size: 12px;">Name</th>
    				<th class="header" style="font-size: 12px;">Actions</th>
				</tr>
			</thead>
			<tbody>
                            <%for(Category c:list){%>
                            <tr>
                                <td style="display:none;"><%=c.getParentID()%></td>
                                <td><%=c.getCategoryID()%></td>
                                <td><%=c.getCategoryName()%></td>
                                <td>
                                    <input class="editForm" id="btnEdit<%=list.indexOf(c)%>" type="image" src="../resources/image/icn_edit.png" title="Edit">
                                    <input class="delForm" id="btnDel<%=list.indexOf(c)%>" type="image" src="../resources/image/icn_trash.png" title="Trash">
                                </td>
                            </tr>
                            <%}%>
   			</tbody>
			</table>
			</div>
		</div><!-- end of .tab_container -->
		</div><!-- end of content manager article -->
	</div>
</body></html>